<!--
    * Time    : 2021-03-30 14:09:03
    * Author  : 李铧锐
    * Desc    : 自提点 - 订单详情
-->
<template>
    <div class="w750 gray-body font-14">
        <!-- 订单详情 - 用户信息 -->
        <div class="user_info bg-fff px-1">
            <div class="h-44p d-flex a-center border-bottom border-c-f8 text-333">
                <span>提货人</span>
                <span class="pl-34">{{ orderInfo.userContactName }}</span>
            </div>
            <div class="h-44p d-flex a-center border-bottom border-c-f8 text-333">
                <span>联系电话</span>
                <span class="pl-2">{{ orderInfo.userContactPhone }}</span>
            </div>
            <div class="h-44p d-flex a-center border-bottom border-c-f8 text-333">
                <span>自提点</span>
                <span class="pl-34">{{ orderInfo.pointName }}</span>
            </div>
            <div class="h-44p d-flex a-center border-bottom border-c-f8 text-333">
                <span>提货地址</span>
                <span class="pl-2">{{ orderInfo.sinceMentionDetailAddr }}</span>
            </div>
            <div class="h-44p d-flex a-center border-bottom border-c-f8 text-333">
                <span>提货留言</span>
                <span class="pl-2">{{ orderInfo.remark || '暂无' }}</span>
            </div>
            <div v-if="orderInfo.status == 4" class="h-44p d-flex a-center border-bottom border-c-f8 text-333">
                <span>核销人</span>
                <span class="pl-34">{{ orderInfo.distributorName }}</span>
            </div>
            <div v-if="orderInfo.status == 4" class="h-44p d-flex a-center border-bottom border-c-f8 text-333">
                <span>核销时间</span>
                <span class="pl-2">{{ orderInfo.finallyDate | dateformat }}</span>
            </div>
        </div>

        <div class="order-info bg-fff mt-1 px-1">
            <div class="order-item">
                <div class="order-title flex-between pt-2 pb-1">
                    <span>订单号：{{ orderInfo.subNumber }}</span>
                    <span v-if="orderInfo.refundState == 0 || orderInfo.status == 4">{{ orderInfo.statusFlag }}</span>
                    <span v-else>{{ statusRefundDict[orderInfo.refundState] }}</span>
                </div>
                <div class="border-bottom border-c-f8 pt-1" v-for="(good, goodIndex) in orderInfo.items" :key="goodIndex">
                    <div class="d-flex pb-2">
                        <div class="position-relative" style="width: 80px; height: 80px">
                            <legend-image :pic="good.pic" alt="" :isJD="good.prodSource == 'JD'" class="w-100 h-100" />
                            <span
                                v-if="good.refundState && good.refundState != 0"
                                class="text-fff font-12 w-100 position-absolute bottom-0 left-0 text-center"
                                style="background: rgba(0, 0, 0, 0.5)"
                            >
                                {{ getRefundState[good.refundState] }}
                            </span>
                        </div>
                        <!-- 商品信息 -->
                        <div class="order-info flex-1 ml-1">
                            <div>{{ good.prodName }}</div>
                            <div class="text-999 font-12 mt">
                                <span class="mr-1">{{ good.attribute }}</span>
                            </div>
                        </div>
                        <!-- 数量 -->
                        <div class="num font-12 text-999">
                            <span>共{{ good.basketCount }}件</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单详情 - 支付信息 -->
        <div class="pay-info text-333 bg-fff mt-1 px-1 mb-5">
            <div class="h-44p d-flex a-center j-sb">
                <span>支付方式</span>
                <span class="">{{ orderInfo.payTypeName }}</span>
            </div>
            <div class="h-44p d-flex a-center j-sb">
                <span>支付时间</span>
                <span class="">{{ orderInfo.payDate | dateformat }}</span>
            </div>
            <div v-if="orderInfo.dvyDate" class="h-44p d-flex a-center j-sb">
                <span>备货时间</span>
                <span class="">{{ orderInfo.dvyDate | dateformat }}</span>
            </div>
            <div class="h-44p d-flex a-center j-sb">
                <span>支付金额</span>
                <div>
                    <span class="price" :style="{ color: themes.color }">
                        ￥{{ money(orderInfo.actualTotal)[0] }}.{{ money(orderInfo.actualTotal)[1] }}
                    </span>
                    <span class="font-12">(含运费￥{{ money(orderInfo.freightAmount)[0] }}.{{ money(orderInfo.freightAmount)[1] }})</span>
                </div>
            </div>
        </div>

        <!-- 底部按钮 -->
        <div v-if="orderInfo.flag && orderInfo.writeOffFlag" class="px-2 my-5 pb-2">
            <div class="h-48p flex-center rounded-5 bg-main" @click="writeOff">
                <span class="text-fff font-14">核销</span>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { disSMPointOrderDetail, disSMPointWriteOff } from '@/api/distributorPoints'
import legendImage from '@/components/legendImage/legendImage'
import cash from 'utils/tool'

export default {
    name: 'pointDetail',
    components: { legendImage },
    data() {
        return {
            id: '',
            source: '20', // 来源 => 0: 扫码, 10: 手动输入,20:通过自提订单列表进入
            orderInfo: '',
            statusRefundDict: {
                0: '正常',
                1: '售后中',
                2: '部分完成',
                4: '售后完成'
            },
            getRefundState: {
                10: '待审核',
                20: '待退货',
                30: '待收货',
                40: '待买家处理',
                50: '待退款',
                60: '待买家收货',
                70: '已完成',
                '-10': '已拒绝'
            },
            money: cash
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    mounted() {
        if (this.$route.query.id) {
            this.id = this.$route.query.id
        }
        if (this.$route.query.source) {
            this.source = this.$route.query.source
        }
        this.getDetail()
    },
    methods: {
        // 获取详情
        getDetail() {
            disSMPointOrderDetail({
                subNumber: this.id,
                source: this.source
            })
                .then((res) => {
                    if (!res.success) return void this.$toast(res.message)

                    this.orderInfo = res.result
                })
                .catch((err) => {
                })
        },

        // 核销
        writeOff() {
            this.$dialog
                .alert({
                    title: '核销',
                    message: '您确认要核销此订单吗？\n 核销完成后订单自动完成交易，请务必确认货物与提货人信息正确再执行此操作！',
                    showCancelButton: true
                })
                .then(() => {
                    disSMPointWriteOff({
                        code: this.orderInfo.sinceMentionCode
                    })
                        .then((res) => {
                            if (!res.success) return void this.$toast(res.msg)

                            this.$toast({
                                message: '操作成功',
                                onClose: () => {
                                    this.$router.replace({ name: 'pointList' })
                                }
                            })
                        })
                        .catch((err) => {
                        })
                })
        }
    }
}
</script>

<style></style>
